<template>
	<view >
		<view class="popup-box" v-if="pupopShow" @touchmove.prevent>
			<view class="content">
				<text class="demofont cancel" @click="sloce">&#xe7ce;</text>
				<view class="goods-info">
					<view class="goods-img" @click="_listtype"><image class="img" src="../../static/image/goods/1.png" mode="aspectFit"></image></view>
					<view class="goods-text">
						<view class="name">格华止 盐酸二甲双胍片</view>
						<view class="price">￥22.40</view>
					</view>
				</view>
				<view class="guige">
					<view>规格</view>
					<view class="item">0.5gx10片x2板/盒</view>
				</view>
				<view class="nuber">
					<view>购买数量</view>
					<mynumber :value="goodsNum"></mynumber>
				</view>
				<!-- <view>{{numberArr}}</view> -->
				<view class="ok" @click="local">确定</view>
			</view>
			<view class="mode" @click="sloce"></view>
			<message ref="message"></message>
		</view>
	</view>
</template>

<script>
	import mynumber from "@/components/mynumber/mynumber.vue"
	export default {
		components:{
			mynumber
		},
		name:"mypopup",
		data() {
			return {
				pupopShow:false,
				goodsNum:"1",
				numberArr:[1,2,3,2,3,4,5,'6',6],
				info:{
					name:"阿莫西林克拉维酸钾",
					price:"22.40",
					gg:"0.5gx10片x2板/盒",
					num:"1",
				}
			};
		},
		onLoad(){

		},
		methods:{
			openshow(){
				this.pupopShow = !this.pupopShow
			},
			sloce(){
				this.pupopShow = false
			},
			esMap(arr){
				var newarr = [...new Set(arr)]
				this.numberArr = newarr
				console.log(newarr)
			},
			unique(arr){
				const res = new Map();
				return arr.filter((a)=> !res.has(a) && res.set(a,1))
			},
			local(){
				localStorage.setItem('token',JSON.stringify(this.info));
			},
			_listtype(){
				var {type,index,data} = events
				console.log(events)
			}
		}
	}
</script>

<style lang="scss">
.popup-box{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	.mode{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.content{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		min-height: auto;
		background: #fff;
		padding: 40upx 20upx 90upx 20upx;
		.cancel{
			position: absolute;
			top: 10upx;
			right: 10upx;
			font-size: 40upx;
		}
		.goods-info{
			display: flex;
			.goods-img{
				width: 220upx;
				height: 140upx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.goods-text{
				margin-left: 20upx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-content: inherit;
				.name{
					width: 100%;
					font-size: 28upx;
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price{
					font-size: 35upx;
					color:rgb(255, 62, 62);
				}
			}
		}
		.guige{
			margin-top: 10upx;
			.item{
				padding: 0 10upx;
				background: rgb(61, 131, 238);
				color: #fff;
				font-size: 26upx;
				display: inline-block;
				margin-left: 30upx;
			}
		}
		.nuber{
			margin-top: 10upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.ok{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 70upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgb(255, 62, 62);
		}
	}
}
</style>
